<template>
	<div>
		<div class="row1">
			<span class="label">邮件类型</span>
			<el-select v-model="queryData.mailCategory" placeholder="请选择" size="default" clearable class="select">
				<el-option v-for="dict in mail_category" :key="dict.value" :label="dict.label" :value="dict.value" />
			</el-select>
			<span class="label">标题</span>
			<el-input v-model="queryData.mailTitle" style="width: 350px; margin-right: 20px" placeholder="请输入标题" />
			<el-button type="primary" @click="search">搜索</el-button>
			<!-- <el-button @click="reset">重置</el-button> -->
			<!-- <el-button type="warning" @click="deleteInfo">回收站</el-button> -->
		</div>

		<BaseTable v-loading="loading" :columns="columns" :dataList="dataList">
			<template #action="{ row }">
				<el-button type="primary" size="small" plain @click="toEdit(row.mailId)"
					><el-icon style="margin-right: 5px"><Edit /></el-icon>复制</el-button
				>
				<!-- <el-button type="primary" size="small" plain @click="toDetail(row.mailId)"
					><el-icon style="margin-right: 5px"><View /></el-icon>详情</el-button
				> -->
			</template>
			<template #mailTitle="{ row }">
				<span style="cursor: pointer; color: #409eff" @click="toDetail(row)">{{ row.mailTitle }}</span>
			</template>
		</BaseTable>
		<pagination :total="total" v-model:page="queryData.pageNum" v-model:limit="queryData.pageSize" @pagination="search" />
	</div>
</template>
<script setup>
import { reactive } from 'vue'
import BaseTable from '@/components/BaseTable'
import { listSendedMail } from '@/api/email/email'
const router = useRouter()
const { proxy } = getCurrentInstance()
const { mail_status, mail_category } = proxy.useDict('mail_status', 'mail_category')

const columns = ref([
	{ key: 1, width: '90', label: `类型`, prop: 'mailCategory', type: 'select', data: mail_category, visible: true },
	{ key: 2, label: `标题`, prop: 'mailTitle', type: 'custom', visible: true },
	{ key: 6, width: '150', label: `时间`, prop: 'sendTime', type: 'dateTimeSf', visible: true },
	{ key: 8, width: '120', label: `操作`, prop: 'action', type: 'custom', visible: true }
])
const total = ref(0)
const dataList = ref([])
const queryData = reactive({
	pageNum: 1,
	pageSize: 100,
	mailStatus: '1',
	mailCategory: '',
	mailTitle: ''
})
const loading = ref(false)
const search = () => {
	loading.value = true
	listSendedMail(queryData).then((res) => {
		dataList.value = res.rows
		total.value = res.total
		loading.value = false
	})
}
search()
const reset = () => {
	for (let item in queryData) {
		queryData[item] = ''
	}
	queryData.pageNum = 1
	queryData.pageSize = 1000
	search()
}
const ids = ref([])
/** 选择条数  */
const handleSelectionChange = (selection) => {
	ids.value = selection.map((item) => item.batchId)
}
const toEdit = (id) => {
	router.push({
		path: '/email/sendDetail',
		query: {
			id: id,
			caogao: false
		}
	})
}
const toDetail = (row) => {
	router.push({
		path: '/email/sendView',
		query: {
			id: row.mailId
		}
	})
}
const deleteInfo = () => {}
</script>
<style lang="scss" scoped>
.left-label {
	color: #33b6fe;
	height: 24px;
	line-height: 24px;
	position: relative;
	top: 1px;
	margin-right: 10px;
	display: inline-block;
	min-width: 80px;
}
:deep(.el-table__header) {
	background-color: #2f3f56;
}
.row1 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
	.label {
		margin: 5px;
		padding: 8px 5px;
		font-size: 14px;
		background-color: rgb(231, 231, 231);
	}
	.select {
		width: 120px;
		position: relative;
		top: -1px;
	}
}
.row2 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
}
.row3 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
}
.row4 {
	padding: 5px 0 10px 0;
}
</style>
